<template>
  <div>
    <v-topbar></v-topbar>
    <div class="content mb-50 tl">
      <div class="swipe-box">
        <div class="swipe-wrap">
          <mt-swipe :auto="4000">
            <mt-swipe-item v-for="(img,index) in imgArr" :key="index">
              <img :src="img">
            </mt-swipe-item>
          </mt-swipe>
        </div>
      </div>
      <div class="buy-box">
        <div class="tuan-num">
          <span><img src="./images/people-icon.svg">5人团</span>
        </div>
        <div class="tuan-price">999
          <del>￥5265</del>
        </div>
        <div class="timer">
          <div>距拼团结束还剩</div>
          <count-down v-on:start_callback="countDownS_cb()" v-on:end_callback="countDownE_cb()" :currentTime="currentTime" :startTime="startTime" :endTime="endTime" :hourTxt="':'" :minutesTxt="':'" :secondsTxt="''" :tipTextEnd="tipTextEnd" ></count-down>
        </div>
      </div>
      <div class="p15 bgf bdt bdb ">
        <div class="g-title">雷沃庄园男爵干红葡萄酒（双支装礼盒）750ml</div>
        <div class="clearfix rel">
          <div class="g-price">￥999.00
            <del>¥1099</del>
          </div>
          <div class="mt5 ad-txt">唐时宫廷酒，品味价值典范！</div>
          <div class="brand">品牌：其他品牌</div>
          <div class="favo-box"><img src="./images/gray-collect.svg"><span class="favo"></span>收藏</div>
        </div>
      </div>
      <div class="p15-10 bgf bdt bdb tuan-box clearfix">
        <span class="fl fz12">当前参团人数</span>
        <span class="face"> <img src="./images/t2.png" ><img src="./images/t2.png" > <img src="./images/t2.png" ></span>
        <div class="fr">
          <span> 还差 <b class="red">1人</b> 成团</span>
          <button type="button" class="btn-join">去参团</button>
        </div>
      </div>
      <ul class="baozhang p15 bgf">
        <li><span>正</span>正品保证</li>
        <li><span>微</span>微信支付</li>
        <li><span>营</span>自营商品</li>
        <li><span>免</span>免费配送</li>
      </ul>
      <div class="clearfix p15 mt10 bgf " @click="showCouponWrap(100)">
        <span class="cline-l">促销</span> <span class="fl coupon-name ml30">限制</span>  <span class="cline-l ml5">该商品不可使用优惠券</span>
      </div>
      <div class="clearfix p15 bdt bgf right-arrow">
        <span class="cline-l">拼团</span> <span class="cline-l coupon-name ml30">查看</span><span class="cline-l ml5">点击查看更多拼团商品</span>
      </div>
      <div class="clearfix p15 bdt bgf " @click="isShowProDetails = true">
        <span class="cline-l">商品参数</span> <span class="cline-r"><img src="./images/gengd-icon.svg"></span>
      </div>
      <!--评价开始-->
      <div class="comment mt10 bgf">
        <div class="clearfix p15-10 mt10 bgf bdb">
          <span class="cline-l">商品评价 (5265)</span>
        </div>
        <!--<div v-if="commmentList.length<1" class="noComment">暂无评价</div>-->
        <!--<ul class="comm-list" v-if="commmentList.length>0">-->
        <ul class="comm-list">
          <!--<li v-for="item in commmentList">-->
          <li>
            <div class="comm-top bdb ">
              <span class="comm-uname"><b>王百川爱喝茶 </b>（六级会员）</span><span class="star-wrap pull-right">
  <!--{{showStar(item.goods_evaluation)}}-->
★★★★★
  </span>
            </div>
            <div class="comm-con">一直在百川名品买东西，所以很放心，品质有保证，价 格也合适</div>
            <!--<div class="comm-pro-desc">规格：{{item.specification}}</div>-->
            <span class="comm-time">发布于 2018-04-12 10:22:28</span>
          </li>
        </ul>
        <div class="show-all">
          <!--<div class="show-all" v-if="commmentList.length>0">-->
          <!--<router-link :to="{path:'/comment/',query:{id:goods.goodsId}}">-->
          <span>查看全部评价</span>
          <!--</router-link>-->
        </div>
      </div>
      <!--评价结束-->

      <div class="pro-details mt10 bgf">
        <div class="details-title bdb"><span>产品介绍</span></div>
        <div class="pro-deta-con">该商品没有描述</div>
        <!--<div class="pro-deta-con" > 该商品没有描述</div>-->

      </div>

    </div>
    <!--底部-->
    <div class="goods-foot">
      <span class="bottom-cart">
        <!--<img src="./images/shopcar-icon.svg" >-->
        <img src="./images/shopcar-h-icon.svg">
        <b>12</b>
      </span>
      <button type="button" class="btn-addcart">加入购物车</button>
      <button type="button" class="btn-buy" @click="showBuy(1)">立即参团</button>
    </div>
    <!--参数-->
    <transition name="slideup" >
      <div class="pop-win"  v-if="isShowProDetails">
        <div class="get-coupon-wrap">
          <div class="c-t rel"><img src="./images/close-icon.svg" class="close"  @click="isShowProDetails = false">商品参数</div>
          <ul class="pd-list">
            <li>品牌：汾酒系列</li>
            <li>酒精度：53%vol</li>
            <li>规格：53%vol</li>
            <li>储藏方法：恒温、避光、横放</li>
            <li>进口/国产：中国</li>
          </ul>
        </div>
      </div>
    </transition>
    <v-buy :isShow="isShow" :opration="opration"></v-buy>
    <v-coupon :isShowCoupon="isShowCoupon""></v-coupon>
  </div>
</template>
<script>
  import topbar from '@/components/topbarback/goodtopbar'
  import buy from '@/components/goods/buy'
  import coupon from '@/components/goods/getcoupon'
  import config from '@/config/config'
  import CountDown from '@/components/home/vue2-countdown'
  import {formatDate} from '@/util/util.js';
  import Vue from 'vue'

  import {Swipe, SwipeItem} from 'mint-ui';

  Vue.component(Swipe.name, Swipe);
  Vue.component(SwipeItem.name, SwipeItem);
  export default {
    components: {
      'v-buy': buy,
      'v-coupon': coupon,
      'count-down': CountDown,
      'v-topbar': topbar,
    },
    data(){
      return {
        isShow: false,
        isShowCoupon: false,
        isShowProDetails: false,
//      picUrl: config.picBaseUrl,
        imgArr: ['http://www.taochu.com/data/files/store_114/goods_14/201804251420146300.jpg'],
        opration: '',
        startTime: 1528443615,
        endTime: 1529452800,
        currentTime: 1528443625,
        tipTextEnd:'已结束'
      };
    },
    mounted(){


    },
    methods: {

      closeBuyPop(){
        this.isShow = false
      },
      showBuy(type){
        this.opration = type
        this.isShow = true
      },

    countDownE_cb(){
      console.log('end');
    },
    countDownS_cb(){
      console.log('start');
    },
      showCouponWrap(storeId){
        console.log(1);
        this.isShowCoupon = true
//        this.sId = storeId
        //        console.log(this.sId);
      },
      closeCouponWrap(){
        this.isShowCoupon = false
      },
    },
    filters: {
      hideName(val){
        if (val) {
          if (val.length <= 2) {
            return val.substring(0, 1) + '**'
          } else {
            return val.substring(0, 1) + '**' + val.substring(val.length - 1);
          }

        } else {
          return '';
        }
      },
      formatDate(time) {
        var date = new Date(time * 1000);
        return formatDate(date);
      },
      toDou(val){
        if (val) {
          return val.toFixed(2);
        }
      }
    },
  }
</script>


<style scoped>
.bgf{
  background:#fff;
}
.mt10{ margin-top:.5rem; }
.jg{
  font-size:.7rem;
  color:#222222;
  text-align:justify;
  line-height:1.5;
}
.jg li{
  margin-bottom:.3rem;
}
.shop-map a{ color:#666; }
.swipe-box{
  background:#fff;
}
.swipe-wrap{
  width:100vw;
  height:100vw;
  background-color:#fff;
  overflow:hidden;
}
.mint-swipe-items-wrap img{
  width:100%;
  height:100%;
}
.p15{
  padding:.75rem;
}
.p15-10{
  padding:.5rem .75rem;
}
.pb-15{
  padding-bottom:.5rem;
}
.mt10{ margin-top:.5rem; }
.mt5{ margin-top:.25rem; }
.bgf{
  background:#fff;
}
.g-title{
  font-size:.8rem;
  line-height:1.5;
  color:#222;
}
.g-price{
  font-size:.8rem;
  line-height:1.5;
  color:#e80013;
  padding:.4rem 0 0;
}
.g-price del{
  font-size:.6rem;
  color:#999999;
}
.yj{
  font-size:.7rem;
  color:#666;
  float:left;
}
.xl{
  float:right;
  font-size:.7rem;
  color:#666;
  margin-top:.5rem;
}
.cline-l{
  float:left;
  font-size:.7rem;
  color:#222;
}
.cline-r{
  float:right;
  font-size:.7rem;
  color:#666;
}
.bdb{ border-bottom:1px solid #d5d5d5 }
.comm-menu{
  margin:.5rem .75rem;
}
.comm-menu li{
  width:25%;
  float:left;
  text-align:center;
  color:#222;
  font-size:.7rem;
  line-height:2rem;
}
.comm-menu li.active{
  color:#e80013;
}
.wntj-list{
  /*display:flex;*/
  /*justify-content:space-around;*/
  /*flex-direction:row;*/
  /*flex-wrap:wrap;*/
  /*padding:0px 5px;*/
  margin-bottom:.5rem;
  overflow:hidden;
}
.wntj-list li{
  float:left;
  background:#fff;
  width:33.33%;
  /*height:13rem;*/
  /*margin-top:6px;*/
  position:relative;
  border-right:1px solid #f7f7f7;
  border-bottom:1px solid #f7f7f7;
}
.wntj-list li:nth-child(3n){
  border-right:1px solid #fff;
}
.pro-img{
  width:100%;
  height:6.5rem;
  display:flex;
  justify-content:center;
  align-items:center;
}
.pro-img img{
  max-height:100%;
  max-width:100%;
}
.pro-desc{
  width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
  font-size:.65rem;
  color:#222222;
  padding:8px;
  border-top:1px solid #f7f7f7;
}
.price-wrap{
  /*margin-top:.5rem;*/
  display:flex;
  align-items:center;
  padding:8px;
  padding-top:0;
}
.price1{
  font-size:.7rem;
  color:#e80013;
  flex:1;
  line-height:1;
}
.cart{
  width:1.1rem;
  display:inline-block;
}
.del{
  color:#666;
  font-size:.6rem;
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.comm-list{
  /*padding:.5rem;*/
  text-align:left;
}
.comm-list li{
  padding:.3rem 0;
  margin:0 .75rem;
  border-bottom:1px solid #d5d5d5;
}
.comm-list li:last-child{
  border-bottom:none;
}
.comm-top{
  font-size:.6rem;
  color:#666;
  line-height:1rem;
  padding:.5rem 0;
}
.star-wrap img{
  margin-right:.1rem;
}
.star-wrap{
  font-size:.8rem;
  color:#e80013;
  letter-spacing:1px;
}
.comm-uname{
  color:#999;
}
.comm-uname b{
  color:#333;
}
.comm-time{
  font-size:.6rem;
  color:#999;
}
.comm-con{
  font-size:.7rem;
  color:#222;
  padding:.2rem 0;
  line-height:1.5;
}
.comm-img img{
  width:60px;
  height:60px;
  margin-right:.3rem;
  border-radius:4px;
}
.comm-pro-desc{
  font-size:.6rem;
  color:#666;
  padding:.5rem 0;
}
.show-all{
  padding:.5rem .75rem;
}
.show-all span{
  display:block;
  padding:.3rem .75rem;
  border-radius:5px;
  border:1px solid #d5d5d5;
  text-align:center;
  font-size:.7rem;
  color:#666;
}
.show-info{
  padding:.75rem;
}
.shop-info-top{
  padding-bottom:.5rem;
  border-bottom:1px solid #d5d5d5;
  overflow:hidden;
}
.shop-info-top > img{
  width:72px;
  height:72px;
  border-radius:4px;
  float:left;
}
.shop-det{ overflow:hidden; padding-left:.5rem; }
.shop-name{
  font-size:.7rem;
  color:#222222;
}
.show-xingyong{
  font-size:.6rem;
  color:#666666;
  margin:.2rem 0;
}
.show-xingyong b{
  color:#e80013;
}
.show-xingyong span:last-child{
  margin-left:.5rem;
}
.show-xingyong img{
  margin-right:.2rem;
}
.shop-map{
  font-size:.6rem;
  color:#666666;
}
.shop-map img{
  margin-right:.2rem;
  vertical-align:middle;
}
.shop-link{
  padding-top:.65rem;
}
.shop-link span{
  display:inline-block;
  width:49%;
  border:1px solid #d5d5d5;
  border-radius:3px;
  text-align:center;
  color:#222;
  font-size:.7rem;
  padding:.3rem 0;
}
.shop-link span img{
  width:.8rem;
  margin-right:.5rem;
  vertical-align:middle;
}
.details-title{
  height:2.5rem;
  line-height:2.5rem;
  position:relative;
  padding-left:1.3rem;
}
.details-title span{
  color:#222;
  font-size:.7rem;
}
.details-title:after{
  content:'';
  position:absolute;
  width:4px;
  height:14px;
  background:#f46058;
  border-radius:1px;
  left:.75rem;
  top:50%;
  margin-top:-7px;
}
.pro-deta-con{
  padding:.75rem;
  font-size:.7rem;
  height:1.6;
  text-align:justify;
}
.pro-deta-con img{
  width:100%;
  display:block;
}
.sem{
  display:inline-block;
  border:1px solid #d5d5d5;
  border-radius:10px;
  padding:.2rem .2rem;
  font-size:.6rem;
  line-height:1;
}
.jssm{
  text-align:center;
  padding:1rem;
  color:#666666;
  font-size:.75rem;
}
/*.jssm a{*/
/*font-size:.7rem;*/
/*color:#0b9bf2;*/
/*}*/
.goods-foot{
  width:100%;
  height:2.5rem;
  position:absolute;
  bottom:0;
  left:0;
  z-index:99;
  background:#fff;
  box-shadow:0 0 10px rgba(0, 0, 0, .1);
}
.btn-fun-wrap{
  width:40%;
  height:100%;
  float:left;
}
..mb-50{ margin-bottom:2.5rem; }
.btn-fun-wrap li{
  width:33.33%;
  height:100%;
  text-align:center;
  float:left;
  padding-top:.3rem;
  color:#666;
}
.btn-fun-wrap span{
  display:block;
  font-size:.6rem;
  line-height:1;
}
.btn-fun-wrap a{
  color:inherit;
}
.btn-fun-wrap img{
  margin:0;
  margin-bottom:-.1rem;
}
.bottom-cart{
  float:left;
  width:20%;
  position:relative;
}
.bottom-cart img{
  width:1.1rem;
  margin-top:.8rem;
}
.bottom-cart b{
  position:absolute;
  right:50%;
  margin-right:-.9rem;
  top:.4rem;
  font-size:.5rem;
  color:#f74c4e;
  border-radius:100%;
  background-color:#fff;
  border:1px solid #f74c4e;
  font-weight:normal;
}
.btn-addcart, .btn-buy{
  width:40%;
  height:100%;
  line-height:2.5rem;
  text-align:center;
  color:#fff;
  font-size:.8rem;
  float:left;
  border:0;
  background:none;
}
.btn-addcart{
  background:#4a4a4a;
}
.btn-buy{
  background:#e93b3d;
}
/*.btn-fun-wrap li span.favo{*/
/*display:inline-block;*/
/*width:.9rem;*/
/*height:.85rem;*/
/*margin-bottom:-.1rem;*/
/*background:url(images/details-shoucang.svg) 0 0 no-repeat;*/
/*-webkit-background-size:.9rem; background-size:.9rem;*/
/*}*/
/*.btn-fun-wrap li.select span.favo{*/
/*background:url(images/my_collection.svg) 0 0 no-repeat;*/
/*-webkit-background-size:.9rem; background-size:.9rem;*/
/*}*/
.noComment{
  padding:1rem;
  font-size:.6rem;
}
.buy-box{
  width:100%;
  height:2.5rem;
  line-height:2.5rem;
  background-color:#E93B3D;
  padding-left:.75rem;
}
.tuan-num{
  float:left;
}.tuan-num span{
   display:inline-block;
  font-size: .55rem;
  color: #FFFFFF;
  border: 1px solid #FFFFFF;
  border-radius: 4px;
  line-height:1;
  padding:.3rem .4rem;
}
.tuan-price{
  padding-left:1rem;
  font-size:.9rem;
  color:#ffffff;
  float:left;
  line-height:2.5rem;
  position:relative;
}
.tuan-price:after{
  content:'¥';
  font-size:.5rem;
  position:absolute;
  top:3px;
  left: .5rem;
}
.tuan-price del{
  font-size:.6rem;
  opacity:.5;
}
.timer{
  float:right;
  width:38%;
  height:100%;
  background-color:#ffc905;
  text-align:center;
  position:relative;
  padding-top:.3rem;
}
.timer:before{
  content:'';
  position:absolute;
  left:-2rem;
  top:0;
  width:0;
  height:0;
  border-width:1.25rem 1rem;
  border-style:solid;
  border-color:transparent #ffc905 transparent transparent;
}
.timer div{
  line-height:1.4;
  font-size:.6rem;
  color:#fff;
}

.timer div span{
  font-size:.6rem;
  color:#ffffff;
  display:inline-block;
  background-color:#222;
  padding:.1rem .2rem;
  border-radius:4px;
  line-height:1;
  margin-right:.2rem;
}
.cd-time{
  font-size:.6rem;
  color:#ffffff;
  display:inline-block;
  background-color:#222;
  padding:.1rem .2rem;
  border-radius:4px;
  line-height:1;
  margin-right:.2rem;
}
.red{ color:#e80013; }
.nolist{
  width:100%;
  text-align:center;
  padding:2rem;
  color:#666;
}
.nolist span{
  display:block;
  font-size:.7rem;
  padding-top:.5rem;
}
.gift-list{
  background:#fff;
  padding:0 .75rem;
}
.gift-list li{
  display:table;
  width:100%;
  padding:.5rem 0;
  border-bottom:1px dashed #ddd;
}
.gift-list li:last-child{
  border-bottom:none;
}
.gift-list li a{
  color:#333;
}
.gift-img{
  width:15%;
  display:table-cell;
  vertical-align:middle;
  text-align:center;
}
.gift-img img{
  width:80%;
}
.gift-t{
  width:65%;
  display:table-cell;
  vertical-align:middle;
}
.gift-p{
  width:20%;
  display:table-cell;
  vertical-align:middle;
  text-align:right;
}
.gift-t{
  font-size:.8rem;
  padding-left:.75rem;
}
.gift-price{
  display:block;
  color:#f00;
  font-size:.9rem;
}
.gift-num{
  display:block;
  color:#666;
  font-size:.7rem;
}
/*.bdb{ border-bottom:1px solid #ddd; }*/
.at, .lt{
  font-size:.7rem;
  color:#666;
  vertical-align:middle;
}
.at a{
  margin-right:.5rem;
}
.limit{
  float:right;
  color:#f60;
  font-size:.7rem;
}
.bdt{ border-top:1px solid #f7f7f7; }
.bdb{ border-bottom:1px solid #f7f7f7; }
.ad-txt{
  font-size:.5rem;
  color:#f74c4e;
  line-height:1.5;
}
.brand{
  font-size:.5rem;
  color:#777777;
  padding-top:.2rem;
}
.top{
  height:2.5rem;
  position:fixed;
  width:100%;
  top:0;
  left:0;
  z-index:98;
}
.favo-box{
  position:absolute;
  right:0;
  bottom:0;
  font-size:.5rem;
  color:#999999;
}
.favo-box img{
  width:1rem;
}
.favo-box span{
  display:block;
  text-align:center;
}
.rel{ position:relative; }
.baozhang{
  font-size:.5rem;
  color:#555555;
  display:flex;
  align-items:center;
}
.baozhang li{
  flex:1;
  /*text-align:center;*/
  line-height:.9rem;
}
.baozhang li span{
  display:inline-block;
  width:.9rem;
  height:.9rem;
  border:1px solid #f74c4e;
  border-radius:100%;
  font-size:.6rem;
  color:#f74c4e;
  line-height:.9rem;
  text-align:center;
  margin-right:.3rem;
}
.coupon-name{
  font-size:.5rem;
  color:#f74c4e;
  border:1px solid #f74c4e;
  border-radius:1rem;
  text-align:center;
  display:inline-block;
  padding:.1rem .3rem;
  float:left;
  margin-right:.25rem;
}
.right-arrow{
  background:#fff url(images/gengd-icon.svg) right .7rem center no-repeat;
}
.tl{ text-align:left; }
.slideup-enter-active, .slideup-leave-active{
  transition:all .3s
}
.slideup-enter, .slideup-leave-to{
  transform:translateY(100%);
  opacity:0;
}
.close{
  position:absolute;
  right:1rem;
  top:.8rem;
}
.pop-win{
  width:100%;
  height:100%;
  position:absolute;
  left:0;
  bottom:0;
  z-index:100;
  background-color:rgba(0, 0, 0, .4);
  transition:all .4s;
}
.get-coupon-wrap{
  background: #fff;
  width:100%;
  position:absolute;
  left:0;
  bottom:0;
}
.c-t{
  font-size:.8rem;
  color:#222222;
  padding:.8rem;
}
.pd-list{
  background: #fff;
  padding:0 .75rem;
  text-align:left;
}
.pd-list li{
  font-size: 13px;
  color: #555555;
  padding:.75rem 0;
  border-top:1px solid #F7F7F7;
}
.face{
  float:left;
  margin-left:.3rem;
}
.face img{
  width:1.2rem;
  height:1.2rem;
  border-radius:100%;
  position:relative;
  vertical-align:middle;
}
.face img:not(:first-child){
  margin-left:-.6rem;
}
.tuan-box{
  font-size: .7rem;
  color: #333333;
  line-height:1.5rem;
}
.btn-join{
  font-size: .65rem;
  color: #FFFFFF;
  padding:.3rem .5rem;
  border:0;
  background:linear-gradient(45deg, #FCB94A 20%,#FE8F3E);
  border-radius:.2rem;
  line-height:1;
  margin-left:.3rem;
}
.ml30{ margin-left:1.5rem;}
.ml5{ margin-left:.25rem;}
</style>
